import React, { useEffect } from "react";
import * as echarts from "echarts";
import "../../../utils/china.js";
import "../../../utils/debounce.js";
import "../../../utils/echartsMap.js"
import { debounce } from "../../../utils/debounce.js";


const mapBoxOption = {
  title: {
    text: "爬虫进度示意省级地图",
    left: "center",
  },
  tooltip: {
    show: true,
    trigger: "item",
  },
  series: [
    {
      type: "map",
      mapType: "china",
      roam: true,
      label: {
        normal: {
          show: false, //显示省份标签
          textStyle: {
            color: "blue",
          }, //省份标签字体颜色
        },
        emphasis: {
          //对应的鼠标悬浮效果
          show: true,
          textStyle: {
            color: "#800080",
          },
        },
      },

      aspectScale: 0.75, //这个参数用于 scale 地图的长宽比。最终的 aspect 的计算方式是：geoBoundingRect.width / geoBoundingRect.height * aspectScale
      zoom: 1, //当前视角的缩放比例。
      itemStyle: {
        normal: {
          borderWidth: 0.3, //区域边框宽度
          borderColor: "black", //区域边框颜色
          areaColor: "#ffefd5", //区域颜色
        },
        emphasis: {
          //鼠标滑过地图高亮的相关设置
          borderWidth: 0.5,
          borderColor: "#4b0082",
          areaColor: "#ffdead",
        },
      },
    },
  ],
};
const provinceMapOption = {
  title: {
    text: "爬虫进度示意省级地图",
    left: "center",
  },
  tooltip: {
    show: true,
    trigger: "item",
  },
  series: [
    {
      type: "map",
      mapType: "zhongwei",
      roam: true,
      label: {
        normal: {
          show: false, //显示省份标签
          textStyle: {
            color: "blue",
          }, //省份标签字体颜色
        },
        emphasis: {
          //对应的鼠标悬浮效果
          show: true,
          textStyle: {
            color: "#800080",
          },
        },
      },

      aspectScale: 0.75, //这个参数用于 scale 地图的长宽比。最终的 aspect 的计算方式是：geoBoundingRect.width / geoBoundingRect.height * aspectScale
      zoom: 1, //当前视角的缩放比例。
      itemStyle: {
        normal: {
          borderWidth: 0.3, //区域边框宽度
          borderColor: "black", //区域边框颜色
          areaColor: "#ffefd5", //区域颜色
        },
        emphasis: {
          //鼠标滑过地图高亮的相关设置
          borderWidth: 0.5,
          borderColor: "#4b0082",
          areaColor: "#ffdead",
        },
      },
    },
  ],
};

function ShpMap() {
  useEffect(() => {
    // 基于准备好的dom，初始化echarts实例
    let mapBoxEchart = echarts.init(document.getElementById("echartsMap"), {
      renderer: "svg",
    });
    let provinceMapBox = echarts.init(
      document.getElementById("spiderProvinceMap"),
      { renderer: "svg" }
    );

    // 使用制定的配置项和数据显示图表
    mapBoxEchart.clear();
    mapBoxEchart.setOption(mapBoxOption);

    mapBoxEchart.on("click", (params) => {
      if (params) {
        // provinceMapOption.series[0].type = params.name;
        provinceMapOption.series[0].mapType = "china";
        console.log(params.name)
        provinceMapOption.title.text = params.name;
        provinceMapBox.clear();
        provinceMapBox.setOption(provinceMapOption);
      }
    });

    // echart图表自适应
    window.addEventListener("resize", debounce(mapBoxEchart.resize, 500, true));
    window.addEventListener("resize", debounce(provinceMapBox.resize, 500, true));
  }, []);

  return (
    <>
      <div
        id="echartsMap"
        style={{
          height: "100%",
          width: "49.5%",
          border: "1px solid black",
          display: "inline-block",
        }}
      ></div>
      <div
        id="spiderProvinceMap"
        style={{
          display: "inline-block",
          border: "1px solid blue",
          height: "100%",
          width: "50%",
          marginLeft: "0.5%",
        }}
      ></div>
    </>
  );
}

export default ShpMap;
